<template>
  <div class="diy-table">
    <div class="top">
      <span class="add" @click.stop="add"><i class="el-icon-plus"></i>{{$t('public.add')}}</span>
      <span class="add" v-if="isShow" @click.stop="refresh"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span>
      <div class="search-pagination" v-if="isShow">
        <Pagination
          :small="true"
          :currentPage="currentPage"
          :count="countTotal"
          @turnPage="turnPage"
          :totalPage="totalPage"
        >
        </Pagination>
      </div>
    </div>
    <el-table :data="tableDataThis" highlight-current-row stripe :loading="refreshLoading" style="width: 100%" size="mini">
      <template v-for="item in tableHeaderThis">
        <el-table-column
          v-if="item.prop !== 'operate' && item.prop !== 'enableName' && item.prop !== 'switch'"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <slot name="column" v-if="item.prop === 'switch'"></slot>
        <el-table-column
          v-if="item.prop === 'enableName'"
          :label="item.label">
          <template scope="scope">
            <span :class="[scope.row.enable === 'true' ? 'green' : 'red']">{{scope.row.enableName}}</span>
          </template>
        </el-table-column>
        <el-table-column
          width="180"
          v-if="item.prop === 'operate'"
          :label="item.label">
          <template scope="scope">
            <el-button v-if="scope.row.editable || type === 'all'" @click="updata(scope.row)" type="text" size="small" class="updata">{{$t('public.edit2')}}</el-button>
            <el-button v-if="isShowUseOrStop && scope.row.enable !== 'true'" @click="reuseScreen(scope.row)" type="text" size="small" class="updata">{{$t('sms.reuse')}}</el-button>
            <el-button v-if="isShowUseOrStop && scope.row.enable === 'true'" @click="stop(scope.row)" type="text" size="small" class="updata">{{$t('sms.stop')}}</el-button>
            <el-button v-if="isShowGoUpDown && scope.$index !== 0" @click="goUp(scope.row)" type="text" size="small" class="updata">{{$t('configLazyLoad.interfaceConfig.moveUp')}}</el-button>
            <el-button v-if="isShowGoUpDown && scope.$index !== (tableDataThis.length - 1)" @click="goDown(scope.row)" type="text" size="small" class="updata">{{$t('configLazyLoad.interfaceConfig.moveDown')}}</el-button>
            <el-button v-if="isShowConfig" @click="showConfig(scope.row)" type="text" size="small" class="updata">{{$t('configLazyLoad.interfaceConfig.configDesc')}}</el-button>
            <el-button v-if="scope.row.editable || type === 'all'" type="text" @click="del(scope.row)" size="small" class="del">{{$t('public.delete')}}</el-button>
          </template>
      </el-table-column>
      </template>
    </el-table>
  </div>
</template>
<script>
  import Pagination from '@/components/public-modules/card/Pagination'
  export default {
    data () {
      return {
        currentPage: 1,
        pageSize: 10
      }
    },
    props: {
      type: {type: String, default: 'all'},
      tableData: Array,
      tableHeader: Array,
      isShowGoUpDown: Boolean,
      isShowUseOrStop: Boolean,
      isShowConfig: Boolean,
      isShow: Boolean,
      refreshLoading: Boolean,
      currentPageData: {
        type: Number,
        default: 1
      },
      countTotal: {
        type: Number,
        default: 0
      }
    },
    watch: {
      currentPageData (cur) {
        this.currentPage = cur
      }
    },
    methods: {
      add () {
        this.$emit('add')
      },
      updata (val) {
        this.page = 1
        this.$emit('updata', val)
      },
      showConfig (val) {
        // this.page = 1
        this.$emit('showConfig', val)
      },
      goUp (val) {
        this.$emit('goUp', val)
      },
      goDown (val) {
        this.$emit('goDown', val)
      },
      del (val) {
        this.$emit('del', val)
      },
      reuseScreen (val) {
        this.$emit('reuseScreen', val)
      },
      stop (val) {
        this.$emit('stop', val)
      },
      refresh () {
        this.currentPage = 1
        this.$emit('refresh')
      },
      turnPage (val) {
        this.currentPage = val
        this.$emit('turnPage', val)
      }
    },
    components: {
      Pagination
    },
    computed: {
      totalPage () {
        return Math.ceil(this.countTotal / this.pageSize) || 0
      },
      tableDataThis () {
        return this.tableData
      },
      tableHeaderThis () {
        return this.tableHeader
      }
    },
    beforeMount () {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .diy-table
    .search-pagination
      float right
      margin-top: 6px
    .green
      color $c-main
    .red
      color $c-pink
    .top
      height 36px
      line-height 36px
      padding 0 10px
      overflow hidden
      border 1px solid $c-border1
      border-bottom none
      .icon-shuaxin
        font-size 12px
        margin-left 10px
        color $c-main
      .add
        float left
        cursor pointer
        .el-icon-plus
          color $c-main
          font-size 12px
          margin-right 3px
      .page
        float right
    .updata
      cursor pointer
    .del
      color $c-pink !important
      cursor pointer
</style>
